<template>
	<view class="content">
		<view class="header">
			<view class="search">
				<input type="text" v-model="search" placeholder="请输入内容" @focus="toSearch()"/>
				<view class="btn">搜索</view>
			</view>
		</view>
		<!-- 常规列表 -->
		<view v-show="!isShow">
			<view>
				<view class="bannar">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" circular="true">
					    <swiper-item>
					        <img src="../../static/imgs/ban1.png" alt="" style="width: 100%;">
					    </swiper-item>
						<swiper-item>
						    <img src="../../static/imgs/ban2.png" alt="" style="width: 100%;">
						</swiper-item>
						<swiper-item>
						    <img src="../../static/imgs/ban3.png" alt="" style="width: 100%;">
						</swiper-item>
					</swiper>
				</view>
				
				<view class="appointment" >
					<view class="tag-class">
						<h3 style="margin-bottom: 10px;">疫苗预约</h3>
						<uni-segmented-control style="margin-bottom: 10px;" :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#4cd964"></uni-segmented-control>
					</view>
					
				
				<view v-show="(current === 0)"  class="orders">
					<scroll-view scroll-y="true" :style="{height: getH() + 'px'}">
						<view v-if="item.type=='0'" v-for="(item,index) in vaccine" :key="index">
							<vaccine :item="item"></vaccine>
						</view>
						<view class="other">
							<text>已经到底啦~</text>
						</view>
					</scroll-view>
				</view>
				
				<view v-show="(current === 1)"  class="orders">
					<scroll-view scroll-y="true" :style="{height: getH() + 'px'}">
						<view v-if="item.type=='1'" v-for="(item,index) in vaccine" :key="index">
							<vaccine :item="item"></vaccine>
						</view>
						<view class="other">
							<text>已经到底啦~</text>
						</view>
					</scroll-view>
				</view>
				
				<view v-show="(current === 2)"  class="orders">
					<scroll-view scroll-y="true" :style="{height: getH() + 'px'}">
						<view v-if="item.type=='2'" v-for="(item,index) in vaccine" :key="index">
							<vaccine :item="item"></vaccine>
						</view>
						<view class="other">
							<text>已经到底啦~</text>
						</view>
					</scroll-view>
				</view>
				
				<view v-show="(current === 3)"  class="orders">
					<scroll-view scroll-y="true" :style="{height: getH() + 'px'}">
						<view v-if="item.type=='3'" v-for="(item,index) in vaccine" :key="index">
							<vaccine :item="item"></vaccine>
						</view>
						<view class="other">
							<text>已经到底啦~</text>
						</view>
					</scroll-view>
				</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import vaccine from '../../subpages/vaccine/vaccine.vue'
	export default {
		name:'Home',
		components:{vaccine},
		data() {
			return {
				isShow:false,
				height:520,
				search:'',
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 300,
				items: ['儿童疫苗', '老人疫苗', '成人疫苗','女性疫苗'],
				current: 0,
				user:{
					name:null,
					sex:null,
					ID:null,
					tel:null,
					birthday:null,
					address:null,
					email:null
				},
				vaccine:[
					{
						id:'Ab2378',
						name:'九价hpv疫苗',
						type:'0',
						introduce:'九价HPV疫苗，是用于预防人乳头瘤病毒（HPV）感染引起的宫颈癌，可以预防90%以上的宫颈癌',
						priceNext:'1099',
						notice:'接种前两小时不能进食',
						number:'300'
					},
					{
						id:'Ab2378',
						name:'九价hpv疫苗',
						type:'1',
						introduce:'九价HPV疫苗，是用于预防人乳头瘤病毒（HPV）感染引起的宫颈癌，可以预防90%以上的宫颈癌',
						priceNext:'1099',
						notice:'接种前两小时不能进食',
						number:'300'
					},
					{
						id:'Ab2378',
						name:'九价hpv疫苗',
						type:'2',
						introduce:'九价HPV疫苗，是用于预防人乳头瘤病毒（HPV）感染引起的宫颈癌，可以预防90%以上的宫颈癌',
						priceNext:'1099',
						notice:'接种前两小时不能进食',
						number:'300'
					},
					{
						id:'Ab2378',
						name:'九价hpv疫苗',
						type:'1',
						introduce:'九价HPV疫苗，是用于预防人乳头瘤病毒（HPV）感染引起的宫颈癌，可以预防90%以上的宫颈癌',
						priceNext:'1099',
						notice:'接种前两小时不能进食',
						number:'300'
					},
					{
						id:'Ab2378',
						name:'九价hpv疫苗',
						type:'3',
						introduce:'九价HPV疫苗，是用于预防人乳头瘤病毒（HPV）感染引起的宫颈癌，可以预防90%以上的宫颈癌',
						priceNext:'1099',
						notice:'接种前两小时不能进食',
						number:'300'
					}
					
				],
			}
		},
		onLoad() {
			this.getH()
			this.getUser()
			// let p={
			// 	user:'15775407848',
			// 	pwd:'12222'
			// }
			// console.log(JSON.stringify(p))
		},
		onPullDownRefresh() {
			console.log("页面下拉刷新")
		},
		methods: {
			toHospital(id){
				uni.navigateTo({
					url:"../../subpages/hospital/hospital?id="+id
				})
			},
			Search(){
				if(true){
					this.isShow=true
				}
			},
			setAddress(){
				
			},
			onClickItem(e) {
			      if (this.current != e.currentIndex) {
			        this.current = e.currentIndex;
			      }
			},
			getH(){
				var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
				return (h-44-101)
			},
			toSearch(){
				uni.navigateTo({
					url:'../../subpages/search/search'
				})
			},
			getUser(){
				// 查询个人信息
				
				if(this.user.ID==null){
					uni.showModal({
						title: '实名认证',
						content: '发现您还未实名认证，请先进行实名认证！',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url:"../../subpages/set/set"
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			}
			
		}
	}
</script>

<style scoped lang="less">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 10px;
		background: linear-gradient(to bottom,rgba(235,220,225,0.5),rgba(224,232,235,0.5)) ;
	}
	.search{
		height: 30px;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		border: 1px solid #666;
		padding: 3px 3px 3px 20px;
		border-radius: 20px;
		margin-top: 20px;
	}
	.search>input{
		height: 100%;
		width: 80%;
	}
	.btn{
		width: 15%;
		padding: 5px 10px;
		text-align: center;
		background-color: #007AFF;
		color:#FFFFFF;
		border-radius: 20px;
	}
	.bannar{
		border-radius: 20px;
		width: 100%;
		margin-top: 20px;
	}
	.appointment{
		width: 100%;
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		
		
	}
	.orders{
		display: flex;
		flex-direction: column;
	}
	.tag-class{
		position: -webkit-sticky;
		position: sticky;
		// top: var(--window-top);
		top: 44px; // 这个试了也可以达到吸顶效果
		z-index: 111;
		padding: 10px 10px;
		background-color: #FFFFFF;
		border-radius: 10px;
	}
	.other{
		height: 90px;
		text-align: center;
		margin-top: 15px;
		color: #aaa;
	}
</style>
